<template>
  <div class="ctn">
    <div class="left-ctn">
      <ScaleBoxLeft :width="480" :height="1080">
        <div id="index">
          <div class="outer">
            <div class="content_left">
              <div class="content_box">
                <div class="top">
                  <LeftTop :stationCount="stationCounts" :projectTime="projectTimes" />
                </div>
                <div class="center">
                  <LeftCenter :status="deviceStatus" />
                </div>
                <div class="bottom">
                  <LeftBottom :warnType="warnTypes" />
                </div>
              </div>
              <div v-if="selectShow">
                <div class="select noSelect" v-if="projectList?.length == 1">{{ projectList[0]['name'] }}</div>
                <div class="select" v-else>
                  <el-select v-model="projectName" placeholder="" :teleported="false" @change="selectChange">
                    <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </ScaleBoxLeft>
      <ScaleBoxRight :width="480" :height="1080">
        <div id="index">
          <div class="outer">
            <div class="content_right">
              <div class="content_box">
                <div class="top">
                  <RightTop :warnRestore="warnRestores" />
                </div>
                <div class="center">
                  <RightCenter :warnResponse="warnResponses" />
                </div>
                <div class="bottom">
                  <RightBottom :dataList="warnNewss" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </ScaleBoxRight>
      <div class="map-box">
        <transition name="fade" mode="out-in">
          <router-view v-if="vShow"></router-view>
        </transition>
      </div>
    </div>
    <div class="loading" v-if="loading">
      <img src="../assets/image/loading.gif" alt="" />
    </div>
  </div>
</template>
<script>
import emitter from '@/libs/mini3d/utils/mitt'
export default {
  name: 'aboutView',
}
</script>
<script setup>
import { ref, onBeforeMount, toRaw, nextTick, watch, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import ScaleBoxLeft from '@/components/scaleBoxLeft.vue'
import ScaleBoxRight from '@/components/scaleBoxRight.vue'
import LeftBottom from './home/LeftBottom.vue'
import LeftCenter from './home/LeftCenter.vue'
import LeftTop from './home/LeftTop.vue'
import RightBottom from './home/RightBottom.vue'
import RightCenter from './home/RightCenter.vue'
import RightTop from './home/RightTop.vue'
import Home from '@/utils/home.js'
import merge from 'webpack-merge'

const router = useRouter()
let stationCounts = ref(10)
let projectTimes = ref(10)
let deviceStatus = ref()
let warnTypes = ref()
let warnRestores = ref()
let warnResponses = ref()
let warnNewss = ref()
let vShow = ref(true)
let selectShow = ref(true)
let timer = ''
let colunmList = []
let isProvincePage = false
let provinceName = ''
let isCity = false
let cityName = ''

// 如果是省，需要注意隔几秒调用的时候，传入的数据要有省份的
emitter.on('message', async data => {
  loading.value = true
  if (data.name == 'province') {
    provinceName = data.cityName
    router.push({
      name: 'province',
      query: { info: JSON.stringify(data), data: projectId.value },
    })
  } else {
    router.push({
      name: 'txmap',
      query: { center: data.center, data: projectId.value },
    })
  }
})

let loading = ref(true)
emitter.on('loadingFinish', () => {
  loading.value = false
})
emitter.on('startLoading', () => {
  loading.value = true
  console.log('开始画的时候~~~~~~~~~~~~~~~' + projectId.value)
})
emitter.on('mouseOver', () => {
  clearInterval(timer)
})
emitter.on('mouseOut', () => {
  timer = setInterval(() => {
    refresh()
    dealColunmData()
  }, 3000)
})
const projectName = ref('')
let projectList = ref()
let projectId = ref()
onBeforeMount(async () => {
  // 通过id去查这个id下有多少项目，然后把项目放在第一个
  projectList.value = await Home.getProject()
  projectName.value = projectList.value[0]['name']
  projectId.value = projectList.value[0]['id']
  // 拿到id后，就去查这个公司有多少设备
  refresh()
  router.push({
    name: 'china',
    query: {
      data: projectId.value,
    },
  })
  console.log('我执行了~~~~~~~~~~~~~~~~~~~~~~onBeforeMount下的projectId.value' + projectId.value)
  timer = setInterval(() => {
    refresh()
    // 同时也刷新地图上的柱状图，确保有变化，再去处理数据的
    dealColunmData()
  }, 3000)

  let mapLists = await Home.getMapList({
    projectId: projectId.value,
    province: '',
    city: '',
  })
  // 便利一下数据，将没有名称的去掉
  for (let i = 0; i < mapLists.length; i++) {
    if (mapLists[i]['key'].length > 1 && mapLists[i]['key'] != 'undefined') {
      colunmList.push(mapLists[i])
    }
  }
})

async function selectChange(data) {
  clearInterval(timer)
  projectId.value = data
  if (isCity) {
    emitter.emit('changeProject', { projectId: projectId.value })
  } else {
    await dealColunmData()
  }

  router.replace({
    query: merge(toRaw(router).currentRoute.value.query, { data: data }),
  })
  await nextTick()
  vShow.value = true
  refresh()
  timer = setInterval(() => {
    refresh()
    // 同时也刷新地图上的柱状图，确保有变化，再去处理数据的
    dealColunmData()
  }, 3000)
}

async function refresh() {
  let overView = await Home.getOverView({ projectId: projectId.value, province: '', city: '', area: '' })
  // LeftTop
  stationCounts.value = overView.data
  // LeftCenter
  let gdeviceStatus = await Home.getDeviceStatus({ projectId: projectId.value, province: '', city: '', area: '' })
  deviceStatus.value = gdeviceStatus.data
  projectTimes.value = gdeviceStatus.data.total
  // LeftBottom
  warnTypes.value = await Home.getWarnType({ projectId: projectId.value, province: '', city: '', area: '' })
  // RightTop
  warnRestores.value = await Home.getWarnRestore({ projectId: projectId.value, province: '', city: '', area: '' })
  // RightCenter
  warnResponses.value = await Home.getWarnResponse({ projectId: projectId.value, province: '', city: '', area: '' })
  // RightBottom
  warnNewss.value = await Home.getWarnNew({ projectId: projectId.value, province: '', city: '', area: '' })
}

async function dealColunmData() {
  console.log('定时器里面调用' + projectId.value)
  let list = []
  let mapLists = await Home.getMapList({
    projectId: parseInt(projectId.value),
    province: isProvincePage ? provinceName : '',
    city: '',
  })
  // 便利一下数据，将没有名称的去掉
  for (let i = 0; i < mapLists.length; i++) {
    if (mapLists[i]['key'].length > 1 && mapLists[i]['key'] != 'undefined') {
      list.push(mapLists[i])
    }
  }
  // 只要不相等，就发
  if (JSON.stringify(list) !== JSON.stringify(colunmList)) {
    colunmList = []
    list.forEach(item => {
      colunmList.push(item)
    })
    console.log('给colunmList从新赋值' + JSON.stringify(colunmList))
    emitter.emit('updateColumn', {
      column: list,
    })
  }
}

watch(
  () => router.currentRoute.value.name,
  async newRouterName => {
    console.log('我监听到了路由变化名称变化~~~~~~~~~~~~~')
    if (newRouterName == 'china') {
      // 返回按钮触发时，如果返回的id不相同，就重新请求一遍，
      if (
        router.options.history.state.forward?.indexOf('province') !== -1 &&
        router.currentRoute.value.query.data != projectId.value
      ) {
        console.log('我要从新请求一遍数据')
        clearInterval(timer)
        projectName.value = projectList.value[0]['name']
        projectId.value = router.currentRoute.value.query.data
        projectList.value.forEach(item => {
          if (item.id == projectId.value) {
            projectName.value = item.name
          }
        })
        // 拿到id后，就去查这个公司有多少设备
        refresh()
        timer = setInterval(() => {
          refresh()
          // 同时也刷新地图上的柱状图，确保有变化，再去处理数据的
          dealColunmData()
        }, 3000)

        let mapLists = await Home.getMapList({
          projectId: projectId.value,
          province: '',
          city: '',
        })
        // 便利一下数据，将没有名称的去掉
        for (let i = 0; i < mapLists.length; i++) {
          if (mapLists[i]['key'].length > 1 && mapLists[i]['key'] != 'undefined') {
            colunmList.push(mapLists[i])
          }
        }
      }
      selectShow.value = true
      isProvincePage = false
      isCity = false
    } else {
      if (newRouterName == 'province') {
        if (
          router.options.history.state.forward?.indexOf('txmap') !== -1 &&
          router.currentRoute.value.query.data != projectId.value
        ) {
          clearInterval(timer)
          projectName.value = projectList.value[0]['name']
          projectId.value = router.currentRoute.value.query.data
          projectList.value.forEach(item => {
            if (item.id == projectId.value) {
              projectName.value = item.name
            }
          })
          // 拿到id后，就去查这个公司有多少设备
          refresh()
          timer = setInterval(() => {
            refresh()
            // 同时也刷新地图上的柱状图，确保有变化，再去处理数据的
            dealColunmData()
          }, 3000)

          let mapLists = await Home.getMapList({
            projectId: projectId.value,
            province: '',
            city: '',
          })
          // 便利一下数据，将没有名称的去掉
          for (let i = 0; i < mapLists.length; i++) {
            if (mapLists[i]['key'].length > 1 && mapLists[i]['key'] != 'undefined') {
              colunmList.push(mapLists[i])
            }
          }
        }

        isProvincePage = true
        isCity = false
        selectShow.value = true
      } else if (newRouterName == 'txmap') {
        isProvincePage = false
        isCity = true
        selectShow.value = true
      }
    }
  },
)

onUnmounted(() => {
  clearInterval(timer)
})
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  height: 95px;
  position: absolute;
  top: 0;
}
.outer {
  width: 100%;
  // height: calc(100%);
  height: calc(100% - 95px);
  display: flex;
  justify-content: space-between;
  position: relative;
  box-sizing: border-box;
  border-radius: 20px;
  top: 95px;

  .content_left {
    z-index: 100;
    padding-left: 30px;
    // position: absolute;
    // height: 100%;
    // top: 0px;
    // left: 0px;
  }

  .content_right {
    padding-right: 30px;
  }
  .content_box {
    width: 430px;
    height: 99.6%;
    // height: calc(100vh - 90px);
    overflow: hidden;
    // border-radius: 20px;
    // border: 1px solid rgba(84, 220, 242, 0.5);
    // background: rgba(82, 171, 255, 0.14);

    // background: transparent;
    display: flex;
    flex-direction: column;
    // background: #010119;

    .top {
      overflow: hidden;
      height: 30%;
    }

    .center {
      overflow: hidden;
      height: 35%;
    }

    .bottom {
      overflow: hidden;
      height: 35%;
    }
  }
}
#index {
  width: 100%;
  height: 100%;
  background-position: center;
}
.map-box {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.select {
  width: 300px;
  height: 200px;
  position: absolute;
  right: -450px;
  top: 0%;
}
.select::before {
  content: '';
  background: red;
  position: absolute;
  left: -40px;
  top: 20px;
  width: 42px;
  height: 25px;
  background: url(../assets/image/triangle.png) no-repeat;
  background-size: 100% 100%;
}
.noSelect {
  height: 60px;
  font-size: 24px;
  font-weight: 600;
  background: url(../assets/image/tbg.png);
  background-repeat: no-repeat;
  background-size: contain;
  color: #ffffff;
  line-height: 60px;
  text-align: left;
}
::v-deep .el-input__wrapper {
  width: 250px;
  text-align: center;
  height: 60px;
  font-size: 24px;
  font-weight: 600;
  background: url(../assets/image/tbg.png);
  background-repeat: no-repeat;
  background-size: contain;
  color: #ffffff;
  box-shadow: none !important;
}

::v-deep .el-input__wrapper input {
  width: 100%;
  height: 100%;
  color: #ffffff;
}

::v-deep .el-popper {
  background: red;
}

::v-deep .el-popper.is-pure {
  padding: 0;
  border: 1px solid rgba(32, 128, 198, 1);
  border-radius: 4px;
  background: rgba(32, 86, 125, 0.5) !important;
  margin-top: 20px;
}
//每一个option
::v-deep .el-select-dropdown__item {
  color: #fff;
  // margin: 0 22px 0 20px !important;
  border-bottom: 1px solid rgba(216, 216, 216, 0.1);
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  text-align: left;
}
::v-deep .el-popper__arrow {
  // background: rgba(32, 128, 198, 0.5) !important;
  display: none;
}
::v-deep .el-select__popper.el-popper[data-popper-placement^='bottom'] .el-popper__arrow::before {
  background: rgba(32, 128, 198, 0.5) !important;
  border-color: rgba(32, 128, 198, 0.5);
}

//选中一个option
::v-deep .el-select-dropdown__item.selected {
  content: unset !important;
  color: #ffffff !important;
}
//鼠标滑过option时
::v-deep .el-select-dropdown__item.hover {
  background-color: unset !important;
  color: rgb(0, 255, 242) !important;
  background: rgba(44, 32, 147, 0.9);
}
//option为空的时候
::v-deep .el-select-dropdown__empty {
  color: #fff;
}
//鼠标滑过select框，去掉白框
::v-deep .el-select:hover:not(.el-select--disabled) .el-input__wrapper {
  box-shadow: unset;
}
::v-deep .el-select-dropdown {
  background: none;
}
::v-deep .el-select-dropdown__list {
  background: none;
}
.loading img {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
